<template>
    <div>
        <breadcrumb :routerList="routerList"></breadcrumb>
        <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm" :rules="rules">
            <el-form-item label="供货商名称" prop="supplier_name">
                <el-input class="input" v-model="ruleForm.supplier_name" :disabled="isDisabled"></el-input>
            </el-form-item>
            <el-form-item label="供货商图片" prop="supplier_img">
                <el-upload
                        class="avatar-uploader"
                        action="https://yx.tfnhg.com/oss_upload"
                        :show-file-list="false"
                        :on-success="headSuccess"
                        :on-error="headError"
                        :disabled="isDisabled">
                    <img v-if="ruleForm.supplier_img" :src="ruleForm.supplier_img" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <span>注：建议上传220px*220px</span>
            </el-form-item>
            <el-form-item label="供货商账号" prop="supplier_uname">
                <el-input class="input" v-model="ruleForm.supplier_uname" :disabled="isDisabled"></el-input>
            </el-form-item>
            <el-form-item label="供货商密码" prop="supplier_pwd">
                <el-input class="input" type="password" v-model="ruleForm.supplier_pwd" :disabled="isDisabled"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')" :disabled="isDisabled">提交</el-button>
                <el-button @click="goBack">返回</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import breadcrumb from '@/components/breadcrumb.vue'
    export default {
        components: {breadcrumb},
        data(){
            return {
                routerList: [
                    {
                        name: '供货商列表',
                        path: '/supplier'
                    },
                    {
                        name: '新增/修改供货商信息',
                        path: ''
                    }
                ],
                ruleForm: {
                    supplier_name: '',
                    supplier_img: '',
                    supplier_uname: '',
                    supplier_pwd: '',
                },
                rules: {
                    supplier_name: [
                        { required: true, message: '请输入供货商名称', trigger: 'blur' }
                    ],
                    supplier_img: [
                        { required: true, message: '请添加供货商图片', trigger: 'change' }
                    ],
                    supplier_uname: [
                        { required: true, message: '请填写供货商账号', trigger: 'blur' }
                    ],
                    supplier_pwd: [
                        { required: true, message: '请填写供货商密码', trigger: 'blur' }
                    ]
                },
                bannerImageUrl: '',
                bannerVisible: false,
                imgLimit: 5,
                isDisabled: false,
                mainType: '',
                bannerId: ''
            }
        },
        created(){
            this.mainType = this.$route.query.type
            if(this.mainType == 4){
                this.isDisabled = true
            }
            if(this.$route.query.list != ''){
                let list = this.$route.query.list
                this.getData(list)
            }
        },
        methods:{
            headSuccess(response, file){
                console.log(response, file)
                this.ruleForm.supplier_img = response
                this.$message({
                    type: 'success',
                    message: '上传图片成功'
                });
            },
            headError(err, file, fileList){//图片上传失败调用
                console.log(err, file, fileList)
                this.$message.error('上传图片失败!');
            },
            getData(list){
                console.log(list)
                this.bannerId = list.id
                this.ruleForm.bannerImgList = list.banner

                this.ruleForm. supplier_name = list.supplier_name
                this.ruleForm.supplier_img = list.supplier_img
                this.ruleForm.supplier_uname = list.user_name
                // this.ruleForm.supplier_pwd =
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        console.log(this.ruleForm)
                        if(this.ruleForm){
                            if(this.ruleForm.supplier_img.length == 0){
                                this.$message.err('请上传供货商图')
                                return false
                            }
                        }
                        this.operationSupplier()
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            async operationSupplier(){
                let res = await this.$Http.operationSupplier({
                    supplier_name:this.ruleForm.supplier_name,
                    supplier_img:this.ruleForm.supplier_img,
                    user_name:this.ruleForm.supplier_uname,
                    user_pwd:this.ruleForm.supplier_pwd
                })
                console.log(res)
                if(res.code == 200){
                    this.$message({
                        type: 'success',
                        message: this.mainType==1?'新增供货商成功':'修改供货商成功!'
                    });
                    this.$router.go(-1);
                }
            },
            bannerSuccess(response, file, fileList){
                console.log(response, file, fileList)
                let disposeFile = this.$util.disposeFile(fileList)
                this.ruleForm.bannerImgList = disposeFile
                this.$message({
                    type: 'success',
                    message: '上传图片成功'
                });
            },
            bannerPreview(file){
                console.log(file)
                this.bannerImageUrl = file.response;
                this.bannerVisible = true;
            },
            bannerRemove(file, fileList){
                let disposeFile = this.$util.disposeFile(fileList)
                this.ruleForm.bannerImgList = disposeFile
            },
            bannerExceed(files, fileList) {//图片上传超过数量限制
                this.$message.error('上传图片数量不能超过5张!');
                console.log(files,fileList)
            },
            bannerError(err, file, fileList){//图片上传失败调用
                console.log(err, file, fileList)
                this.$message.error('上传图片失败!');
            },
            goBack(){
                this.$router.go(-1);
            },
        }
    }
</script>

<style>
    .demo-ruleForm{
        width: 100%;
        background: white;
        margin-top: 20px;
        padding: 20px 0;
        box-sizing: border-box;
    }
    .input{
        width: 50%;
    }
</style>
